<template>
	<div class="serviceProject">
		<ul class="c-container">
			<el-col :span="10" class="searchButton">
				<el-button type="primary" icon="el-icon-search" @click="func_configDialogVisible" plain>匹配发型师价格</el-button>
				<el-button type="success" icon="el-icon-refresh" @click="func_getBundData" plain>刷新</el-button>
			</el-col>
		</ul>
		<el-table :data="workRoomPriceList" border class="table" header-cell-class-name="table-header">
			<el-table-column prop="id" label="ID" width="55" align="center" v-if="false"></el-table-column>
			<el-table-column label="序号" width="55" align="center"><template #default="scope">
					{{scope.$index+1}}
			</template></el-table-column>
			<el-table-column v-if="false" prop="workRoomId" label="工作室id" ></el-table-column>
			<el-table-column v-if="false" prop="barberId" label="理发师id" ></el-table-column>
			<el-table-column v-if="false" prop="serviceProjectId" label="服务项目id" ></el-table-column>
			<el-table-column label="理发师名称" align="center">
				<template #default="scope">
					<el-button type="text" @click="func_editDialogVisible(scope.$index, scope.row)">
						{{scope.row.bName}}
					</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="pName" label="服务项目名称" align="center"></el-table-column>
			<el-table-column prop="price" label="服务金额" align="right"></el-table-column>
			<el-table-column label="状态" width="100" align="center">
				<template #default="scope">
					<el-tag :type="
							scope.row.disable === 2
								? 'success'
								: scope.row.disable === 1
								? 'danger'
								: ''
					">{{ scope.row.disable === 2 ? '启用': '未启用' }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="启用" width="100">
				<template #default="scope">
					<el-switch v-model="scope.row.disable" class="handle-switch mr40"
						placeholder="启用状态"
						:active-value= "2" :inactive-value= "1"
						active-color="#13ce66" inactive-color="#ff4949"
						@change="func_changeRowStatus(scope.$index, scope.row)"
					></el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="projectDecs" label="操作" width="250" >
				<template #default="scope">
					<el-button type="warning" size="small" icon="el-icon-delete" @click="func_handleDel(scope.$index, scope.row)" plain>删 除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
				:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
		</div>
	</div>
	<!-- ---------------------------------------------------------------------------------------------------------------------- -->
	<!-- 服务项目弹出框 -->
	<el-dialog title="服务项目弹出框" v-model="showConfigDialogVisible" width="55%" :close-on-click-modal="false">
		<el-container>
			<el-header>
				<el-col :span="10" class="searchInput">
					<el-select v-model="barberOptionValue" clearable filterable placeholder="请选择发型师" @change="func_selectBarberName">
						<el-option v-for="item in barberOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="5" class="searchButton">
					<el-button type="primary" icon="el-icon-search" @click="func_configProjectPrice">绑定服务项目</el-button>
				</el-col>
			</el-header>
			<el-main>
				<el-table :data="serviceProjectPriceList" border class="table"
					element-loading-background = "rgba(255, 255, 255, .5)" 
					element-loading-text = "加载中，请稍后..."
					element-loading-spinner = "el-icon-loading"
					header-cell-class-name="table-header" default-expand-all >
					<el-table-column prop="id" label="ID" width="55" align="center" v-if="false"></el-table-column>
					<el-table-column label="序号" width="55" align="center"><template #default="scope">
							{{scope.$index+1}}
					</template></el-table-column>
					<el-table-column prop="serviceProjectId" label="项目ID" v-if="false"></el-table-column>
					<el-table-column prop="workRoomId" label="工作室ID" v-if="false"></el-table-column>
					<el-table-column prop="barberId" label="发型师ID" v-if="false"></el-table-column>
					<el-table-column prop="bname" label="发型师名称" ></el-table-column>
					<el-table-column prop="pname" label="项目名称" ></el-table-column>
					<el-table-column label="项目价格" >
						<template #default="scope">
							<el-input v-model="scope.row.price" placeholder="服务价格" />
						</template>
					</el-table-column>
				</el-table>
			</el-main>
			<el-footer>
				<el-button @click="showConfigDialogVisible = false">取 消</el-button>
				<el-button type="success" @click="func_chooseData">确 定</el-button>
			</el-footer>
		</el-container>
	</el-dialog>
	<!-- ---------------------------------------------------------------------------------------------------------------------- -->
	<!-- 服务项目价格内容弹出框 -->
	<el-dialog title="服务项目价格内容弹出框" v-model="showEditDialogVisible" width="55%" :close-on-click-modal="false">
		<el-container>
			<el-main>
			<el-form ref="formRef" :model="editRoomProjectPriceform" label-width="80px">
				<el-form-item label="ID" prop="id" v-if="false">
					<el-input v-model="editRoomProjectPriceform.id" placeholder="ID" />
				</el-form-item>
				<el-form-item label="服务项目" prop="pName">
					{{editRoomProjectPriceform.pName}}
				</el-form-item>
				<el-form-item label="服务价格" prop="price" style="width:350px" >
					<el-input v-model="editRoomProjectPriceform.price" placeholder="服务价格" />
				</el-form-item>
				<el-form-item label="启用状态" prop="disable">
					<el-radio v-model="editRoomProjectPriceform.disable" label=1 >未启用</el-radio>
					<el-radio v-model="editRoomProjectPriceform.disable" label=2 >启用</el-radio>
				</el-form-item>
			</el-form>
			</el-main>
			<el-footer>
				<el-button @click="showEditDialogVisible = false">取 消</el-button>
				<el-button type="success" @click="">确 定</el-button>
			</el-footer>
		</el-container>
	</el-dialog>
</template>

<script>
import { onMounted, ref, reactive, toRefs } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
import { findWorkRoomBarberProjectPriceListPage, findWorkRoomServiceProjectListPage, findWorkRoomBarberListPage,
 configWorkRoomBarberProjectPriceInfo, cleanWorkRoomBarberPrice, configWorkRoomDisable } from "../../../api/hairmanager/workroom";

export default {
	name: "vBarberProjectPrice",
  	props:{
		selectValue: Number
	},
	emits: ["barberProjectPriceData"],
    setup(props,cex){
		const router = useRouter();
		const route = useRoute();
		let formRef = ref({});
		const editRoomProjectPriceform = reactive({
			id: 0,
			pName: '',
			price: 0,
			disable: 0,
		});
		// 工作室绑定的发型师列表
		let workRoomPriceList = ref([]);
		let serviceProjectPriceList = ref([]);
		let pageTotal = ref(0);
		// 工作室ID
		let workRoomId = route.query.id;
		let barberOptions = ref([]);
		let barberOptionValue = ref('');
		let selectBarberName = ref('');
		let emptyDataErrorFlg = ref(true);
		let serviceProjectPriceObject = ref({
			id: 0,
			bName: '',
			pName: '',
			workRoomId: workRoomId,
			barberId: 0,
			serviceProjectId: 0,
			price: 0,
			disable: 1,
		});
		let showEditDialogVisible = ref(false);
		let showConfigDialogVisible = ref(false);
		const query = reactive({
			keyword: "",
			pageIndex: 1,
			pageSize: 10,
		});
// =========================================================================================
		const func_editDialogVisible = (index, row) => {
			editRoomProjectPriceform.id = row['id'];
			editRoomProjectPriceform.price = row['price'];
			editRoomProjectPriceform.pName = row['pName'];
			editRoomProjectPriceform.disable = '' + row['disable'];
			
			showEditDialogVisible.value = true;
		};
		const func_configDialogVisible = () => {
			// 绑定数据列表
			serviceProjectPriceList.value = ([]);
			// 选择数据下拉选项
			barberOptions.value = ([]);
			barberOptionValue.value = '';
			// 配置发型师选项1
			findWorkRoomBarberListPage(workRoomId).then((res) => {
				res.data.forEach((element) => {
					let obj = {label:'',value:''};
					obj.label = element['name'];
					obj.value = element['id'];
					barberOptions.value.push(obj);
				});
			});
			showConfigDialogVisible.value = true;
		};
        /**
         * @name 公共 分页导航
         * @description 关键词分页查询
         */
		const handlePageChange = (val) => {
			query.pageIndex = val;
			func_getBundData();
		};
        /**
         * @name 公共 获取表格数据
         * @description 读取发型师数据
         */
        const func_getBundData = () => {
            findWorkRoomBarberProjectPriceListPage(workRoomId).then((res) => {
				workRoomPriceList.value = res.data;
				if(res.data != null){
					pageTotal.value = res.data.length;
				} else {
					pageTotal.value = 0;
				}
			});
        };
		const func_selectBarberName = (v) => {
			let fucccccc1 = barberOptions.value.find((item) =>{
				return item.value === v;
			});
			if(fucccccc1 != null){
				selectBarberName = fucccccc1.label;
			}else{
				selectBarberName = null;
			}
			emptyDataErrorFlg.value = false;
		};
        /**
         * @name 服务项目列表查询配置服务价格
         * @description 读取服务项目数据
         */
		const func_configProjectPrice = () => {
			if(emptyDataErrorFlg.value == true){
				ElMessage.error('请选择一位发型师！');
				return;
			}
			if(selectBarberName == null){
				ElMessage.error('请选择一位发型师！');
				return;
			}
			// 确认工作室已经绑定服务项目的数据
			findWorkRoomServiceProjectListPage(workRoomId).then((res) =>{
				let tmp_workroom_projects = res.data;
				tmp_workroom_projects.forEach((element) => {
					serviceProjectPriceObject= {};
					serviceProjectPriceObject.id = 0;
					serviceProjectPriceObject.bname = selectBarberName;
					serviceProjectPriceObject.pname = element['projectName'];
					serviceProjectPriceObject.workRoomId = workRoomId;
					serviceProjectPriceObject.barberId = barberOptionValue.value;
					serviceProjectPriceObject.serviceProjectId = element['projectId'];
					// serviceProjectPriceObject.price = 11111;
					serviceProjectPriceObject.disable = 1;
					serviceProjectPriceList.value.push(serviceProjectPriceObject);
				});
			});
		};
		/**
		 * @name 工作室发型师服务项目价格配置
		 */
        const func_saveBarberProjectPriceRel = (editParam) => {
            configWorkRoomBarberProjectPriceInfo(editParam).then((res) => {
				if(res.code != 200) {
					if(res.type == 0) {
						ElMessage.warning(res.data.msg);
					} else {
						ElMessage.error(res.data.msg);
					}
				} else {
					func_getBundData();
					showConfigDialogVisible.value = false;
					cex.emit('barberProjectPriceData', serviceProjectPriceList.value);
				}
            });
        };
		const func_handleDel = (index, row) => {
			let roomProjectPriceParam = {workroomId: workRoomId, id: row['id']};
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {
            type: "warning",
            }).then(() => {
				// 调用删除数据
				cleanWorkRoomBarberPrice(roomProjectPriceParam).then((res) => {
					if(res.code != 200) {
						if(res.type == 0) {
							ElMessage.warning(res.data.msg);
						} else {
							ElMessage.error(res.data.msg);
						}
					} else {
						workRoomPriceList.value.splice(index, 1);
						func_getBundData();
						ElMessage.success("删除成功");
					}
				});
            }).catch(() => {});
		}
		const func_chooseData = () => {
			var roomBarberRelParamList = ([]);
            serviceProjectPriceList.value.forEach((item) => {
				roomBarberRelParamList.push(item);
            });
			let editParam = {
                "workroomId":route.query.id,
                "roomBarberRelParamList":roomBarberRelParamList,
            }
			func_saveBarberProjectPriceRel(editParam);
		};
		const func_changeRowStatus = (index, row) => {
			if(index === -1){
				return;
			}else{
				let obj = {'id':row['id'], 'disable':row['disable']};
				configWorkRoomDisable(obj).then((res) => {
					if(res.code != 200) {
						if(res.type == 0) {
							ElMessage.warning(res.data.msg);
						} else {
							ElMessage.error(res.data.msg);
						}
					} else {
						func_getBundData();
						ElMessage.success("修改成功");
					}
				});
			}
		};
		const func_trClick = (row, event, column) => {
			console.log(row.id);
		};
		const initParams = () => {
			pageTotal.value = 0;
			func_getBundData();
		};
		initParams();
        return {
			showConfigDialogVisible, showEditDialogVisible, func_editDialogVisible, func_configDialogVisible, emptyDataErrorFlg,
			query,formRef, editRoomProjectPriceform,
			workRoomPriceList, serviceProjectPriceList, pageTotal, 
			func_getBundData, handlePageChange, func_handleDel, func_changeRowStatus,
			func_chooseData, func_saveBarberProjectPriceRel, func_trClick,
			barberOptions, barberOptionValue, selectBarberName, serviceProjectPriceObject, func_selectBarberName,
			func_configProjectPrice, 
        };
		onMounted(()=>{
		
		});
    },
};
</script>
<style scoped>
.barber {
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}
.barber::-webkit-scrollbar {
    width: 0;
}
.barber-el-menu:not(.el-menu--collapse) {
    width: 250px;
}
.searchInput{
	margin-left: 10px;
}
.searchButton{
	margin-left: 10px;
}
.table{
	margin-top: 10px;
}
.right-align .cell{color: red; text-align: right;}
</style>